<template>
  <div class="partnerMain">
    <!-- 登录授权后 -->
    <div class="partnerLoginedMain">
      <h2 class="partitle flexb">
        <div v-if="channelName">{{ $t('order.channel') }} <span>{{channelName}}</span></div>
      </h2>
      <div class="flex contentTop" v-if="chainDataOptions.length">
        <div class="datebox mb15" v-for="(item, index) in chainDataOptions" :key="index">
          <div class="optionChain">
            <img :src="chainLogo(item.coin)" alt="" style="background: #fff;border-radius: 50%;" >
            <span class="fontColor">{{item.coin}}</span>
          </div>
          <div class="flexb">
            <span>{{ $t('order.tradeNumber') }}</span>
            <span>{{item.dealCount}} {{ $t('order.pen') }}</span>
          </div>
          <div class="flexb">
            <span>{{ $t('order.sharingFees') }}</span>
            <span>{{item.dividendFees}} {{item.chain}}</span>
          </div>
          <div class="flexb">
            <span>{{ $t('order.sharingMoney') }}</span>
            <span>{{item.dividendAmount}} {{item.chain}}</span>
          </div>
        </div>
      </div>
      <el-form :inline="true" :model="formSerach"
      class="formSerach-inline right">
        <!-- 日期 -->
        <el-form-item :label="$t('order.date')">
          <date-vue :dateDefault="formSerach.dateArr"
          @ListenTimeArr="listenTimeArr" style="width: 250px" />
        </el-form-item>
        <!-- 方向 -->
        <el-form-item :label="$t('order.tradeDirection')" class="form-item-min">
          <el-select v-model="formSerach.direction" style="width: 80px">
            <el-option v-for="item in directionList"
            :key="item.value"
            :label="$t(`order.${item.language}`)"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 主链 -->
        <el-form-item :label="$t('order.mainLink')" class="form-item-min">
          <el-select v-model="formSerach.coinType" style="width: 80px">
            <el-option v-for="item in coinTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 用户账户 -->
        <el-form-item :label="$t('order.account')" class="form-item-min">
          <el-input v-model="formSerach.account" style="width: 120px"
          clearable
          :placeholder="$t('order.accountName')"></el-input>
        </el-form-item>
        <!-- 交易角色 -->
        <el-form-item :label="$t('order.TradingRole')" class="form-item-min">
          <el-select v-model="formSerach.role" style="width: 85px">
            <el-option v-for="(item, index) in roleList"
            :key="index"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 管理员选项 渠道方 -->
        <el-form-item :label="$t('order.channel')" class="form-item-min">
          <el-select v-model="formSerach.channel" style="width: 150px">
            <el-option v-for="(item, index) in channelList"
            :key="index"
            :label="item.name"
            :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 清除条件 -->
        <el-form-item style="margin-right: 0">
          <el-button type="info"
          plain @click="handleClearSubmit">{{ $t('order.clearCondition') }}</el-button>
        </el-form-item>
        <!-- 搜索 -->
        <el-form-item style="margin-right: 0">
          <el-button
          type="primary" @click="handleSerachSubmit(1)">{{$t('order.search')}}</el-button>
        </el-form-item>
      </el-form>
      <!-- table 数据 -->
      <div class="tablebox mt">
        <el-table
          :data="tableData"
          v-loading="loading"
          :empty-text="$t('myWallet.noData')"
          row-key="id"
          :default-sort = "{prop: 'orderTime', order: 'descending'}"
          style="width: 100%">
          <!-- 成交时间 -->
          <el-table-column :label="$t('order.subAvgTime')">
            <template slot-scope="props">
              {{props.row.dealTime | dateFormatBIH}}
            </template>
          </el-table-column>
          <!-- 成交id -->
          <el-table-column :label="$t('order.tradeId')">
            <template slot-scope="props">
              <span>
                {{props.row.dealRecordId}}
              </span>
            </template>
          </el-table-column>
          <!-- 交易对 -->
          <el-table-column
            :label="$t('order.symbol')">
            <template slot-scope="props">
              <span>
                {{props.row.symbol}}
              </span>
            </template>
          </el-table-column>
          <!-- 交易方向 -->
          <el-table-column :label="$t('order.tradeDirection')">
            <template slot-scope="props">
              <span v-if="props.row.direction === 1" class="color-green">{{$t('order.buy')}}</span>
              <span v-if="props.row.direction === 2" class="color-red">{{$t('order.sell')}}</span>
            </template>
          </el-table-column>
          <!-- 用户账号 -->
          <el-table-column :label="$t('order.userAccount')">
            <template slot-scope="props">
              <span>
                {{props.row.account}}
              </span>
            </template>
          </el-table-column>
          <!-- 交易价格 -->
          <el-table-column :label="$t('order.tradePrice')">
            <template slot-scope="props">
              <span>
                {{props.row.dealPrice}}
              </span>
            </template>
          </el-table-column>
          <!-- 交易手续费 -->
          <el-table-column :label="$t('order.tradeFees')">
            <template slot-scope="props">
              <span>
                {{props.row.dealFees}}
              </span>
            </template>
          </el-table-column>
          <!-- 交易trxid -->
          <el-table-column :label="$t('order.tradeTrxid')">
            <template slot-scope="props">
              <div class="tridbox">
                <span class="fn-text1" style="width: 56%; display: inline-block"> {{props.row.trxId}} </span>
                <span
                v-clipboard:copy="props.row.trxId"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
                >{{ $t('activityChristmas2018.copy') }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagebox center ptb">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formSerach.currPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="formSerach.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="formSerach.totalCount">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
// 公用JS
import { chainLogo } from '@/utils/wallet';
// 模版
import dateVue from './time';


export default {
  name: 'partner',
  data() {
    return {
      hasDataForTable: 1, // 数据加载中
      loading: false,
      userLogin: false,
      authorized: false, // 是否授权
      userAuthorized: false, // 是否有权限查看
      isAdmin: false, // 是否是管理员
      channelName: '', //  渠道方名称
      tableData: [], // 列表数据
      formSerach: { // 查询数据
        dateArr: [],
        direction: '', // 方向
        coinType: '', // 主链
        account: '', // 用户账户
        currPage: 1, // 当前页码
        pageSize: 10, // 每页条数
        totalCount: 0, // 总条数-用于显示页数
        channel: '', // 渠道方
        role: '', // 交易角色
      },
      // 模拟数据
      chainDataOptions: [],
      // 方向
      directionList: [],
      // 币种
      coinTypeList: [],
      channelList: [],
      roleList: [],
    };
  },
  watch: {
    '$store.state.app.language': function change() {
      this.dataReset();
    },
    '$store.state.app.scatter.identity': {
      handler: function listen(val) {
        if (!val) {
          this.userLogin = false;
          return;
        }
        this.userLogin = true;
      },
      deep: true,
    },
  },
  components: {
    dateVue, // 日期控件
  },
  computed: {
  },
  created() {
    const yesdate = moment(new Date()).add(-1, 'd').format('Y-MM-DD');
    this.formSerach.dateArr = [yesdate, moment(new Date()).format('Y-MM-DD')]; // 日期范围
    this.dataReset();
  },
  mounted() {
    const token = localStorage.getItem('Frontend-Token');
    if (token) {
      this.formSerach.currPage = 1;
      this.$nextTick(() => {
        this.handleSelectByAdmin(() => {
          this.handleSerachSubmit();
        });
      })
    }
  },
  beforeDestroy() {
  },
  methods: {
    // 获取admin权限的下拉列表
    handleSelectByAdmin(callback) {
      this.$http.post('/channelDividend/getChannelList').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        if (res.channelList && res.channelList.length > 0) {
          this.channelList = res.channelList;
          this.formSerach.channel = this.channelList[0].code;
        }
        callback()
      });
    },

    // 执行数据搜索
    handleSerachSubmit(cPage) {
      const form = this.formSerach;
      const currPage = cPage || form.currPage;
      form.currPage = currPage;
      const isdate = form.dateArr && form.dateArr.length > 1;
      const params = {
        currPage,
        pageSize: form.pageSize,
        orderByName: '',
        orderByType: '',
        chain: form.coinType,
        accountNo: form.account,
        direction: form.direction,
        beginDate: isdate ? form.dateArr[0] : '',
        endDate: isdate ? form.dateArr[1] : '',
        channelCode: form.channel,
      }
      this.handleGetData(params);
      this.handleGetDataSummary(params);
    },

    // 清除搜索条件
    handleClearSubmit() {
      this.formSerach.dateArr = []; // 日期范围
      this.formSerach.direction = ''; // 方向
      this.formSerach.coinType = ''; // 主链
      this.formSerach.account = ''; // 账户
      this.handleSerachSubmit();
    },

    // 查询渠道分成对账明细
    handleGetData(params) {
      this.$http.post('/channelDividend/queryChannelDividendDetail', params).then((res) => {
        if (res.code !== 0) {
          this.userAuthorized = false;
          this.$message.error(res.msg);
          return;
        }
        this.userAuthorized = true;
        this.tableData = res.page.list;
        this.formSerach.totalCount = res.page.totalCount;
        this.isAdmin = false;
        if (res.isAdmin) {
          this.isAdmin = res.isAdmin;
        }
      });
    },

    // 查询渠道分成汇总信息
    handleGetDataSummary(params) {
      const paramsReset = params;
      paramsReset.dealRole = this.formSerach.role;
      this.$http.post('/channelDividend/queryChannelDividendSummary', paramsReset).then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.chainDataOptions = res.summaryList;
        this.channelName = res.channelName;
      });
    },

    /**
     * 钱包授权
     */
    handleWalletPermission() {
      // const checkWallet = localStorage.getItem('checkWallet');
      // if (!Number(checkWallet)) {
      //   this.$emit('listenWalletPermission', true);
      //   return;
      // }
      this.$emit('listenWalletLogin', true);
    },

    // 分页
    handleSizeChange(val) {
      this.formSerach.pageSize = val;
      this.handleSerachSubmit();
    },

    // 选中页
    handleCurrentChange(val) {
      this.formSerach.currPage = val;
      this.handleSerachSubmit();
    },

    // 获取选择时间
    listenTimeArr(val) {
      this.formSerach.dateArr = val;
    },

    // 链的logo
    chainLogo(val) {
      return chainLogo(val)
    },

    // 拷贝反馈
    onCopy() {
      this.$message.success(this.$t('myWallet.copySuccess'));
    },
    onError() {
      this.$message.error(this.$t('myWallet.copyError'));
    },
    // data set
    dataReset() {
      // 方向
      this.directionList = [
        {
          value: '',
          label: this.$t('order.all'),
          language: 'all',
        },
        {
          value: 1,
          label: this.$t('order.buy'),
          language: 'buy',
        },
        {
          value: 2,
          label: this.$t('order.sell'),
          language: 'sell',
        }
      ];
      // 币种
      this.coinTypeList = [
        {
          value: '',
          label: this.$t('order.all'),
        },
        {
          value: 'eos',
          label: 'EOS',
        },
        {
          value: 'bos',
          label: 'BOS',
        },
        {
          value: 'meetone',
          label: 'MEETONE',
        },
        {
          value: 'enu',
          label: 'ENU',
        },
        {
          value: 'fibos',
          label: 'FIBOS',
        },
        {
          value: 'telos',
          label: 'TELOS',
        },
        {
          value: 'wax',
          label: 'WAX',
        },
        {
          value: 'lynx',
          label: 'LYNX',
        }
      ];
      this.roleList = [
        {
          value: '',
          label: this.$t('order.all'),
        },
        {
          value: 1,
          label: 'Make'
        },
        {
          value: 2,
          label: 'Take'
        },
      ];
    }
  },
};
</script>

<style lang="scss" scoped>
  @import '@/assets/css/variables.scss';

  .partnerMain, .banner {
    width: 100%;
    min-width: 1380px;
    min-height: 88vh;
  }

  .partnerMain {
    background: #fff;

    .partnerLoginedMain {
      max-width: 1700px;
      margin: auto;
      padding: 40px 80px;
      height: 100%;
      box-sizing: border-box;
    }

    .partitle {
      padding: 0 0 20px;
    }

    .formSerach-inline {
      /deep/.el-form--inline .el-form-item {
        margin-bottom: 10px;
      }
    }

    .contentTop {
      margin-bottom: 30px;
      justify-content: flex-start;
      flex-wrap: wrap;


      .datebox {
        min-width: 280px;
        margin: 0 20px 0 0;
        border: 1px solid #ebeef5;
        padding: 10px;

        .flexb {
          margin-top: 5px;

          span {
            padding: 0 10px;
          }
        }
      }

      .optionChain {
        text-align: center;
        padding-bottom: 10px;

        img {
          width: 19px;
          display: inline-block;
          vertical-align: middle;
          margin-bottom: 2px;
        }

        span {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }

    .tablebox {
      border: 1px solid #ebeef5;

      .tridbox {
        span {
          vertical-align: middle;

          &:last-child{
            color: #278EDA;
            cursor: pointer;
          }
        }
      }
    }
  }

  .theme-1B1D27 #app {
    .partnerMain {
      background: transparent;

      .contentTop {
        .datebox {
          background-color: #152247 !important;
        }

        .datebox {
          border: 1px solid #4e5b85 !important
        }
      }

      .tablebox {
        border: 1px solid #4e5b85 !important;

        /deep/ .el-table__body-wrapper .cell {
          color: RGBA(197, 206, 228, 0.5) !important;
        }

        /deep/ .has-gutter .cell {
          color: RGBA(197, 206, 228, 1) !important;
        }
      }
    }
  }

  @media screen and (max-width: 1450px) {
    .partnerMain {
      .form-item-min /deep/.el-form-item__content {
      }
      .partnerLoginedMain {
        padding: 30px 20px;
      }
    }
  }
</style>
